<template>
  <view class="order">
    <view class="top headline">
      <uni-icons type="arrowleft" size="24" class="left" color="#999" @click="commonality.back()" />
      订单列表
      <view class="msg"><image src="/static/img/find_2.png"/></view>
    </view>
    <view class="list">
		<!-- <view :class="{ active: list_active == 0 }" @click="list_active = 0">全部</view> -->
		<view :class="{ active: list_active == 25 }" @click="go_active(25)">已完成</view>
		<view :class="{ active: list_active == 1 }" @click="go_active(1)">退款中</view>
		<view :class="{ active: list_active == 2 }" @click="go_active(2)">换货中</view>
		<!-- <view :class="{ active: list_active == 0 }" @click="go_active(0)">处理中</view> -->
    </view>
    <ul>
      <li class="order_list" v-for="item in initData" :key="item.id">
        <p class="number">
          订单编号：{{item.orderSn}}
        </p>
        <view class="msg">
          <image
            :src="item.image"
            class="imgthumb"
          >
          <view class="text">
            <view class="title">{{item.productName}}</view>
			<view v-for="(item1,index1) in item.sku" :key="index1">
				<view class="sizr trait " v-if="index1==0">颜色：{{item1.split(":")[1]}}</view>
				<view class="sizr trait " v-if="index1==1">尺码：{{item1.split(":")[1]}}</view>
			</view>
          </view>
        </view>
        <p class="total"><text class="quantity">共1件</text> 合计：<text class="price">￥{{item.orderPrice}}</text></p>
        <view class="operation" @click="go_commoditydetails(item.orderId)">
          <text>查看详情</text>
        </view>
		<view class="state" v-if="list_active == 25">	 
		  已完成
		</view>
        <view class="state" v-if="list_active == 2">
          <image src="/static/img/change1.png"/>
          换货中
        </view>
        <view class="state" v-if="list_active == 1">
          <image src="/static/img/change2.png"/>
          退款中
        </view>
		<view class="state" v-if="list_active == 0">
		  处理中
		</view>
      </li>
    </ul>
	<view v-show="initData.length==0" class="notavailable">
		<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
		<view class="nottext">暂时没有数据</view>
	</view>
	<view class="pagination" v-show="initData[0]">
		<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
			<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
			上一页
		</view>
		<view class="center">{{ paging.page }}/{{ paging.total }}</view>
		<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
			下一页
			<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
		</view>
	</view>
    <view class="gotop"></view>
  </view>
</template>
<script>
import { uniIcons } from '@dcloudio/uni-ui';
import list from '../../../servers/order/list.js';
export default {
	components: { uniIcons },
	data() {
		return {
			
			list_active: 1,
			status:0,
			is_go_top: false,
			initData:[],
			paging: {
				page: 1,
				total: 100
			},
			
			
			
			is_all: false
		};
	},
	mounted() {
		this.getDate();
	},
	methods: {
		getDate() {
			if(this.list_active==0||this.list_active==25){
				var obj = { afterSalesType:'', status:this.status, currentPage: this.paging.page, pageSize: 10 };
			}else{
				var obj = { afterSalesType: this.list_active,  currentPage: this.paging.page, pageSize: 10 };
			}
			
			list.afterData(obj)
				.then(res => {
					console.log(res.data.records);
		
					this.paging.total = Math.ceil(res.data.total / res.data.size);
					this.initData = [];
					this.initData = res.data.records.map(v => {					
							v.image = this.imgCDNUrl + v.productImg;
							var sku = [];
							if (v.productSkuDesp) {
								sku = v.productSkuDesp.split(',');
							}
							
							v.sku = sku;
						
						return v;
					});
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_active(e) {
			console.log(e);
			this.list_active = e;
			if(e==25){
				this.status=25
				
			}
			if(e==1||e==2){
				this.status=0
			}
			// 客服已通过审核
			if(e==0){
				this.status=1
				
			}
			this.paging.page = 1;
			this.getDate();
		},
		go_commoditydetails(e) {
			uni.setStorage({
				key: 'commoditydetails',
				data: e,
				success: function() {
					uni.navigateTo({
						url: '/pages/shop/order/commoditydetails'
					});
				}
			});
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getDate();
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getDate();
			}
		}
	}
};
</script>
<style lang="less" scoped>
.order {
  min-height: 100%;
  background: #fff;
  .headline {
	  top:var(--status-bar-height);
    .msg {
      position: absolute;
      right: 20rpx;
	  top:20rpx;
      image {
        width: 38rpx;
		height: 38rpx;
      }
    }
  }
  .list {
    display: flex;
	margin-top: var(--status-bar-height);
    border-bottom: 1rpx solid #e1e1e1; /*no*/
    view {
      position: relative;
      flex: 1;
      text-align: center;
      line-height: 89rpx;
    }
    view.active {
      color: #bd3c8c;
    }
    view.active::after {
      position: absolute;
      content: "";
      bottom: 21rpx;
      left: 50%;
      width: 49rpx;
      height: 3rpx;
      background: #bd3c8c;
      transform: translate(-50%, 0);
    }
  }
  ul {
    padding: 20rpx;
    font-size: 26rpx;
    li {
      position: relative;
      box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
      border-radius: 10rpx;
      .number {
        padding: 0 20rpx;
        border-bottom: 1rpx solid #e1e1e1; /*no*/
        font-size: 28rpx;
        line-height: 92rpx;
        .right {
          font-size: 26rpx;
          color: #bd3c8c;
        }
      }
      .msg {
        padding: 20rpx;
        display: flex;
        .imgthumb {
         width: 218rpx;
         height: 218rpx;
          border-radius: 10rpx;
         
        }
        .text {
          flex: 1;
          margin-left: 32rpx;
          .title {
            line-height: 44rpx;
            margin-bottom: 16rpx;
          }
          .trait {
            color: #999;
            line-height: 38rpx;
            .right {
              color: #000;
            }
          }
          .price {
            line-height: 44rpx;
          }
        }
      }
      .total {
        text-align: right;
        line-height: 40rpx;
        padding: 0 20rpx;
        .quantity {
          color: #999;
          margin-right: 20rpx;
        }
        .price {
          font-size: 30rpx;
        }
      }
      .operation {
        text-align: right;
        padding: 46rpx 0;
        color: #bd3c8c;
        text {
          display: inline-block;
          text-align: center;
          width: 180rpx;
          line-height: 64rpx;
          border: 1px solid #bd3c8c; /*no*/
          border-radius: 32rpx;
          margin: 0 20rpx 0 35rpx;
          box-sizing: border-box;
        }
      }
      .state {
        position: absolute;
        bottom: 58rpx;
        left: 26rpx;
        font-size: 28rpx;
        line-height: 44rpx;
        image {
          position: relative;
          width: 44rpx;
		  height: 44rpx;
          top: 10rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>

